import 'package:flutter/material.dart';

class RelaxPage extends StatefulWidget {
  const RelaxPage({super.key, required this.animationController});

  final AnimationController animationController;

  @override
  State<RelaxPage> createState() => _RelaxPageState();
}

class _RelaxPageState extends State<RelaxPage>
    with SingleTickerProviderStateMixin {
  //默认的下移动画

  @override
  void initState() {
    //控制到0.25，剩余部分tongue
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var slideInAnimation =
        Tween(begin: const Offset(0, 1), end: const Offset(0, 0))
            .chain(
              CurveTween(curve: const Interval(0, 0.2)),
            )
            .animate(widget.animationController);
    var slideOutAnimation =
        Tween(begin: const Offset(0, 0), end: const Offset(-2, 0))
            .chain(CurveTween(curve: Curves.easeInOut))
            .chain(CurveTween(curve: const Interval(0.2, 0.4)))
            .animate(widget.animationController);
    //chain,parent 实际上没有区别
    var titleAnimation =
        Tween(begin: const Offset(0, 0), end: const Offset(0, 0))
            .chain(CurveTween(curve: Curves.easeInOut))
            .chain(CurveTween(curve: const Interval(.2, 0.4)))
            .animate(widget.animationController);
    //原来text和image的交错，并不是interval合适offset不同
    var textAnimation =
        Tween(begin: const Offset(0, 0), end: const Offset(-2.5, 0))
            .chain(CurveTween(curve: Curves.easeInOut))
            .chain(CurveTween(curve: const Interval(0.2, .4)))
            .animate(widget.animationController);
    var imageAnimation =
        Tween(begin: const Offset(0, 0), end: const Offset(-4, 0))
            .chain(CurveTween(curve: Curves.easeInOut))
            .chain(CurveTween(curve: const Interval(0.2, .4)))
            .animate(widget.animationController);
    return SlideTransition(
      position: slideInAnimation,
      child: Container(
        height: MediaQuery.of(context).size.height,
        padding: const EdgeInsets.symmetric(horizontal: 18.0),
        decoration:
            const BoxDecoration(color: Color.fromRGBO(245, 235, 226, 1)),
        child: SlideTransition(
          position: slideOutAnimation,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text("relax"),
              SlideTransition(
                position: titleAnimation,
                child: const Text(
                  "Relax",
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              const SizedBox(height: 20),
              SlideTransition(
                position: textAnimation,
                child: const Text(
                  "Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore",
                  textAlign: TextAlign.center,
                ),
              ),
              const SizedBox(height: 10),
              SlideTransition(
                position: imageAnimation,
                child: Container(
                  constraints:
                      const BoxConstraints(maxWidth: 350, maxHeight: 250),
                  child: Image.asset(
                      "assets/introduction_animation/relax_image.png",
                      fit: BoxFit.cover),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
